<template>
  <div>
      <el-form
      :model="formData"
      inline
      class="myForm">
      <el-form-item prop="userId">
        <el-input v-model="formData.userId" placeholder="请输入用户ID"></el-input>
      </el-form-item>
       <el-form-item prop="orderSn">
        <el-input v-model="formData.orderSn" placeholder="请输入订单编号"></el-input>
      </el-form-item>
       <el-form-item prop="orderStatus">
      <el-select v-model="orderStatusArray" multiple placeholder="请选择订单状态">
    <el-option
      v-for="item in orderStatusOptions"
      :key="item.value"
      :label="item.label" 
      :value="item.value">
    </el-option>
  </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary" icon="el-icon-search">查找</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border class="myTab">
      <el-table-column align="center" label="订单编号" prop="orderSn" width="180px"></el-table-column>
      <el-table-column align="center" label="用户ID" prop="userId"></el-table-column>
      <el-table-column align="center" label="订单状态" prop="orderStatus">
        <template slot-scope="scope">
          <el-tag>
          {{scope.row["orderStatus"] | tableFilter(orderStatusOptions)}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额" prop="orderPrice"></el-table-column>
      <el-table-column align="center" label="支付金额" prop="actualPrice"></el-table-column>
      <el-table-column align="center" label="支付时间" prop="payTime"></el-table-column>
      <el-table-column align="center" label="物流单号" prop="shipSn"></el-table-column>
      <el-table-column align="center" label="物流渠道" prop="shipChannel"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="260px">
        <template slot-scope="scope">
            <el-button @click="openDialog(scope.row)" type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    class="myStyle"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500"
    >
     <el-form ref="dialogForm" :model="dialogFormData" label-width="100px" >
        <el-form-item label="订单编号:" prop="orderSn">
        {{dialogFormData.order.orderSn}}
        </el-form-item>
        <el-form-item label="订单状态:" prop="orderStatus">
         <el-tag>{{dialogFormData.order.orderStatus | tableFilter(orderStatusOptions)}}</el-tag>
        </el-form-item>
        <el-form-item label="订单用户:" prop="consignee">
         {{dialogFormData.order.consignee}}
        </el-form-item>
        <el-form-item label="用户留言:" prop="message">
         {{dialogFormData.order.message}}
        </el-form-item>
        <el-form-item label="收货信息:" prop="consignee">
         (收货人){{dialogFormData.order.consignee}} (手机号){{dialogFormData.order.mobile}} (地址){{dialogFormData.order.address}}
        </el-form-item>
        <el-form-item label="商品信息"><br>
          <el-table :data="dialogFormData.orderGoods" border>
            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column label="商品编号" prop="goodsSn"></el-table-column>
            <el-table-column label="货品规格" prop="specifications"></el-table-column>
            <el-table-column label="货品价格" prop="price"></el-table-column>
            <el-table-column label="货品数量" prop="number"></el-table-column>
            <el-table-column label="商品图片" prop="picUrl">
              <template slot-scope="scope">
      <img :src="scope.row.picUrl" width="80">
    </template>
            </el-table-column>
          </el-table>
        </el-form-item>
          <el-form-item label="费用信息:" prop="actualPrice">
         (实际费用){{dialogFormData.order.actualPrice}}元
         =(商品总价){{dialogFormData.order.goodsPrice}}元
         +(快递费用){{dialogFormData.order.freightPrice}}元
         -(优惠减免){{dialogFormData.order.couponPrice}}元
         -(积分减免){{dialogFormData.order.integral}}元
         
        </el-form-item>
         <el-form-item label="支付信息:">
         (支付渠道)微信支付
         (支付时间){{dialogFormData.order.payTime}} 
        </el-form-item>
         <el-form-item label="快递信息:">
         (快递公司){{dialogFormData.order.shipChannel}} 
         (快递单号){{dialogFormData.order.shipSn}} 
         (发货时间){{dialogFormData.order.shipTime}} 
        </el-form-item>
         <el-form-item label="收货信息:">
         (收货人名字){{dialogFormData.order.consignee}} 
         (确定收货时间){{dialogFormData.order.confirmTime}} 
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'orderManage',
  componentTitle: '订单管理',

  data () {
    return {
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: '创建',
      dialogType: 'add',
  dialogFormData: {
        order:{orderSn:''},
        orderGoods:[],
        
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0
      },
      formData: {
        userId:'',
        orderSn:'',
      },
      tableData: [],
      orderStatus:[],
      orderStatusOptions: [
        {label:"未付款",value:101},
        {label:"用户取消",value:102},
        {label:"系统取消",value:103},
        {label:"已付款",value:201},
        {label:"申请退款",value:202},
        {label:"已退款",value:203},
        {label:"已发货",value:301},
        {label:"用户收货",value:401},
        {label:"系统收货",value:402},],  
         orderStatusArray:[]
    }
  },
  mounted () {
    this.search()
  },
    filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },
  methods: {
     openDialog (row) {
         this.dialogVisible=true
         axios({
        url: 'http://192.168.200.251:8888/admin/order/detail',
        method: 'get',
        params: {
         id:row.id
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
         console.log(res)
        this.dialogFormData = Object.assign({}, res.data.data)
      })
         
    },
    
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/order/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData,
         orderStatusArray:this.orderStatusArray.join(','),
          
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list

        this.pageInfo.total = res.data.data.total
        console.log(res.data.data.list.orderStatus)
      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>
.myStyle{
  margin-top: 70px;
  margin-left: 80px;
}

.myForm{
display: flex;
justify-content: flex-end; 
margin-top: 10px;
margin-right: 22px;
}

.myTab{
  width: 95%;
  text-align: center;
  margin: 0 auto;

}

.myDal{
  .input1{
    width:340px; 
    margin-left: 40px;
  }
}


</style>



